<template>
	<view class="info-page">
		<nav-bar title="设置"></nav-bar>
		<view class="info-item" v-for="(item, index) in userInfoConfig" :key="index">
			<view class="label">{{ item.label }}</view>
			<view class="value-box">
				<button v-if="item.isImg" class="img-box" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="user-photo" :src="avatar || ''"></image>
				</button>
				<input v-if="item.isName" class="value" type="nickname" v-model="nickname" @blur="bindText"></input>
				<input v-if="item.showId" class="value" v-model="sysUserid" disabled="true"></input>
				<uni-icons v-if="item.key !== 'phoneNumber'" type="right" size="16" color="#808080"></uni-icons>
			</view>
		</view>
		
		<you-popup :popupVisible="editDialog" :popupTitle="`编辑${editItem.label}`" @popupClose="clickCancelEdit"
			@cancel="clickCancelEdit" @confirm="clickConfirmEdit">
			<template #popupContent>
				<view class="input-content">
					<uni-easyinput v-if="!editItem.isImg" v-model="editForm[editItem.key]" :placeholder="placeholder"
						:type="editItem.key === 'briefText' ? 'textarea' : 'text'"></uni-easyinput>
					<view v-else>
						<view v-if="editForm.userPhoto" class="input-img-box">
							<image class="user-photo" :src="editForm.userPhoto" mode="aspectFill"></image>
							<uni-icons type="clear" size="24" color="#FF513A" class="close-icon"
								@click="editForm.userPhoto = null"></uni-icons>
						</view>
						<uni-file-picker v-else :limit="1" :imageStyles="imageStyles" @select="uploadSelect($event)">
							<uni-icons type="camera-filled" size="30" color="#999999"></uni-icons>
							<view class="desc">{{ item.desc || '点击上传' }}</view>
						</uni-file-picker>
					</view>
				</view>
			</template>
		</you-popup>
		<you-bottom-btn :btnConfig="bottomBtnConfig" @clickSubmit="clickSubmit" @changeIdentities="changeIdentities"
			@clickCancel="clickCancel"></you-bottom-btn>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/config'
	export default {
		name: 'EditUserInfo',
		data() {
			return {
				baseUrl,
				avatar: '',
				nickname: '微信用户',
				sysUserid: '无',
				userInfoConfig: [{
						label: '头像',
						key: 'userPhoto',
						isImg: true
					},
					{
						label: '姓名',
						key: 'userName',
						isName: true
					},
					{
						label: '用户Id',
						key: 'sysUserid',
						showId: true
					},
					// { label: '电话', key: 'phoneNumber' }
				],
				userInfo: null,
				editDialog: false,
				editForm: {
					userPhoto: null,
					userName: null,
					briefText: null
				},
				placeholder: '',
				editItem: {},
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "#D8DCE5",
						width: '2rpx',
						style: 'dashed',
						radius: '16rpx'
					}
				},
				bottomBtnConfig: [
					{
					text: '更新用户信息',
					class: 'confirm',
					funcName: 'clickSubmit'
					},
					{
					text: '切换身份',
					class: 'confirm',
					funcName: 'changeIdentities'
					}
				],
			}
		},

		onLoad(options) {
			this.getUserInfo()
			// this.userInfo = {
			// 	userInfo: '',
			// 	userName: '猫捡球',
			// 	phoneNumber: '137 3465 8216'
			// }
			// this.userInfo.userPhoto = this.userInfo.userPhoto ? this.userInfo.userPhoto.includes('http') ? this.userInfo
			// 	.userPhoto : this.baseUrl + this.userInfo.userPhoto : ''
			// this.userInfo.userPhotoList = [this.userInfo.userPhoto]
		},

		methods: {
			async getUserInfo() {
				const res = await this.$GET('/fx/user/getInfo')
				if (res.code == 200) {
					console.log(res)
					this.avatar = res.data.userPhoto.includes('http')? res.data.userPhoto : `${this.baseUrl}${res.data.userPhoto}`
					this.nickname = res.data.userName
					this.sysUserid = res.data.sysUserid
				}
			},
			async changeIdentities() {
				console.log('切换身份')
				// uni.navigateTo({
				// 	url: '/subPages/home/login'
				// })
			},
			async clickSubmit() {
				if (this.avatar == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传头像'
					})
				} else if (this.nickname == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入昵称'
					})
				} else {
					const data = {
						userName: this.nickname,
						userPhoto: this.avatar
					}
					const res = await this.$PUT('/fx/user/edit', data)
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '更新信息成功'
						})
					}
				}
			},
			bindText(e) {
				console.log(e)
				this.nickname = e.detail.value
			},
			onChooseAvatar(e) {
				console.log(e)
				this.avatar = e.detail.avatarUrl
			},
			clickInfoItem(item) {
				this.editItem = item
				// if (item.isImg) {

				// } else {
				// 	this.placeholder = '请输入' + item.label
				// }
				// this.editDialog = true
				// this.editForm[item.key] = this.userInfo[item.key]
			},
			clickCancelEdit() {
				this.editDialog = false
				this.editForm = {
					userPhoto: null,
					userName: null,
					briefText: null
				}
			},
			uploadSelect($event) {
				const tempFiles = $event.tempFiles[0]
				uni.uploadFile({
					url: this.baseUrl + '/common/upload',
					filePath: tempFiles.path,
					name: 'file',
					header: {
						"Authorization": 'Bearer ' + uni.getStorageSync('App-Token')
					},
					// 成功函数
					success: (res) => {
						// 取到文档服务器的值
						let uploadData = JSON.parse(res.data)
						this.editForm.userPhoto = this.baseUrl + uploadData.fileName
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error)
					}
				})
			},
			clickConfirmEdit() {
				if (!this.editForm[this.editItem.key]) {
					uni.showToast({
						title: '请输入' + this.editItem.label,
						icon: 'none'
					})
					return
				}
				if (this.editItem.key === 'briefText') {
					this.editBriefText()
					return
				}
				const params = {
					id: this.userInfo.baUserId,
					...this.editForm
				}
				return
				api_physician.updateUserInfo(params).then(res => {
					if (res.code !== 200) return
					uni.showToast({
						title: '更新成功',
						icon: 'none'
					})
					api_login.fetchUserInfo().then(res => {
						if (res.code !== 200) return
						const userInfo = {
							baUserId: res.baUser.id,
							...res.baUser,
							...res.doctorInfo
						}
						uni.setStorageSync('allUserInfo', userInfo)
					})
					uni.reLaunch({
						url: '/pages/physicianMine'
					})
					this.editDialog = false
				})
			},
			editBriefText() {
				const params = {
					briefText: this.editForm.briefText
				}
				return
				api_physician.updatePhysicianInfo(params).then(res => {
					if (res.code !== 200) return
					uni.showToast({
						title: '更新成功',
						icon: 'none'
					})
					api_login.fetchUserInfo().then(res => {
						if (res.code !== 200) return
						const userInfo = {
							baUserId: res.baUser.id,
							...res.baUser,
							...res.doctorInfo
						}
						uni.setStorageSync('allUserInfo', userInfo)
					})
					uni.reLaunch({
						url: '/pages/physicianMine'
					})
					this.editDialog = false
				})
			},

		}
	}
</script>
<style lang="scss">
	button {
		padding: 0 !important;
	}
	.info-page {
		// height: 100vh;
		background-color: #F0F3F5;

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			// margin-bottom: 2rpx;
			border-bottom: 1px solid #F0F3F5;
			background-color: #FFF;

			.label {
				font-size: 28rpx;
				font-weight: 500;
				color: #000;
			}

			.value-box {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: #808080;

				.value {
					margin-right: 16rpx;
					text-align: right;
				}

				.img-box {
					width: 100rpx;
					height: 100rpx;
					margin-right: 16rpx;
					border-radius: 50rpx;
					overflow: hidden;

					.user-photo {
						width: 100%;
						height: 100%;
						// background-color: #126352;
					}
				}
			}
		}
	}

	.input-img-box {
		position: relative;
		width: 186rpx;
		height: 186rpx;
		margin-right: 16rpx;
		border-radius: 16rpx;

		.user-photo {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}

		.close-icon {
			position: absolute;
			right: -12rpx;
			top: -12rpx;
		}
	}

	.input-content {
		padding: 0 30rpx 30rpx;
		display: flex;
		justify-content: center;
	}

	.uni-file-picker__container {
		display: flex;
		justify-content: center;
	}

	.file-picker__box-content {
		flex-direction: column;
	}

	.icon-del-box {
		width: 36rpx !important;
		height: 36rpx !important;
	}

	.icon-del {
		width: 20rpx !important;
	}
</style>